<!--
 * @Description: 关联节点选择
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-01-25 17:41:13
 * @LastEditTime: 2023-05-11 10:56:07
 * @FilePath: \cscec-pms-admin\src\views\subcontractors\components\SelectAssociatedNode.vue
-->
<template>
  <BaseModal
    :visible="visible"
    title="关联节点"
    :width="1000"
    destroy-on-close
    :z-index="1001"
    :dialog-class="'select-associated-node'"
    @cancel="handleModalCancel"
  >
    <div class="btn-wrapper">
      <a-button
        type="primary"
        :disabled="treeData.length===0"
        @click="expandedAll"
      >
        展开全部
      </a-button>
      <a-button
        type="primary"
        :disabled="treeData.length===0"
        @click="retractAll"
      >
        收起全部
      </a-button>
    </div>
    <!-- <u-table
      ref="table"
      fixed-columns-roll
      :height="500"
      show-header-overflow
      :tree-config="{
        children: 'childTree',
        expandAll: false,
      }"
      row-id="id"
      row-key="id"
      :use-virtual="true"
      border
      :row-height="36"
      :highlight-current-row="false"
      class="select-associated-node-table"
    >
      <u-table-column
        v-for="item in columns"
        :key="item.dataIndex"
        :prop="item.dataIndex"
        :label="item.title"
        :width="item.width"
        :tree-node="item.dataIndex === 'phaseCategory'"
        align="center"
      >
        <template v-slot="{ row }">
          <template v-if="row.nodeType === 0">
            <template v-if="item.dataIndex === 'sortNum'">
              {{ row[item.dataIndex] }}
            </template>
            <template v-if="item.dataIndex === 'phaseCategory'">
              <a-checkbox
                v-model="row.check"
                :indeterminate="true"
                class="select-associated-node-checkbox"
              />{{ row[item.dataIndex] }}
            </template>
          </template>
          <template v-else>
            <div
              v-if="item.dataIndex === 'businessMatters'"
              class="select-associated-node-business-matters"
            >
              <a-checkbox
                v-model="row.check"
                class="select-associated-node-checkbox"
              />{{ row[item.dataIndex] }}
            </div>
            <template v-else-if="['sortNum','businessMatters','subContractorName'].includes(item.dataIndex)">
              {{ row[item.dataIndex] }}
            </template>
          </template>
        </template>
      </u-table-column>
    </u-table> -->
    <a-spin :spinning="loading">
      <div class="tree-wrapper">
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="treeData"
          :replace-fields="replaceFields"
          @expand="onExpand"
        />
      </div>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleModalCancel">
        取消
      </a-button>
      <a-button
        type="primary"
        :loading="submiting"
        @click="handleConfirm"
      >
        确定
      </a-button>
    </template>
  </BaseModal>
</template>
<script>
import BaseModal from '@/components/BaseModal'
// import { UTable, UTableColumn } from 'umy-ui'
import { getKeyNode, relationNode } from '@/api/project/projects'
export default {
  name: 'SelectAssociatedNode',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      require: true
    },
    // 节点信息
    data: {
      type: Object,
      require: true
    }
  },
  components: {
    BaseModal
    // UTable,
    // UTableColumn
  },
  data() {
    return {
      // 加载
      loading: true,
      // 表头
      // columns: [
      //   {
      //     title: '编号',
      //     width: 100,
      //     align: 'center',
      //     dataIndex: 'sortNum'
      //   },
      //   {
      //     title: '阶段/类别',
      //     width: 400,
      //     dataIndex: 'phaseCategory'
      //   },
      //   {
      //     title: '业务事项',
      //     width: 200,
      //     dataIndex: 'businessMatters'
      //   },
      //   {
      //     title: '关联分包商',
      //     dataIndex: 'subContractorName'
      //   }
      // ],
      // // 源数据
      // tableSource: [],
      // // 选中项
      // check: ['1', '11', '111'],
      // 展开项
      expandedKeys: [],
      autoExpandParent: true,
      // 选中项
      checkedKeys: [],
      // 自定义树字段
      replaceFields: {
        children: 'childTree',
        key: 'id'
      },
      // 树数据
      treeData: [],
      // 提交
      submiting: false,
      // 禁用列表
      disableCheckList: []
    }
  },
  watch: {
    visible: {
      handler(nV, oV) {
        if (nV) {
          this.$nextTick(() => {
            // this.$refs.table.reloadData(this.tableData)
            this.getTree()
          })
        } else {
          this.treeData = []
        }
      }
    }
  },
  // computed: {
  //   // 表格数据
  //   tableData() {
  //     return this.tableSource
  //   }
  // },
  mounted() {
    // setTimeout(() => {
    //   this.tableSource = [
    //     {
    //       id: '1',
    //       sortNum: 1,
    //       phaseCategory: '阶段/类别',
    //       businessMatters: '关联分包商',
    //       subContractorName: '业务事项',
    //       nodeType: 0,
    //       check: false,
    //       indeterminate: false,
    //       path: ['1'],
    //       childTree: [
    //         {
    //           id: '11',
    //           sortNum: 11,
    //           phaseCategory: '阶段/类别',
    //           businessMatters: '关联分包商',
    //           subContractorName: '业务事项',
    //           nodeType: 0,
    //           check: false,
    //           indeterminate: false,
    //           path: ['1', '11'],
    //           childTree: [
    //             {
    //               id: '111',
    //               sortNum: 111,
    //               phaseCategory: '阶段/类别',
    //               businessMatters: '关联分包商',
    //               subContractorName: '业务事项',
    //               check: true,
    //               path: ['1', '11', '111']
    //             }
    //           ]
    //         }
    //       ]
    //     },
    //     {
    //       id: '2',
    //       sortNum: 2,
    //       phaseCategory: '阶段/类别',
    //       businessMatters: '关联分包商',
    //       subContractorName: '业务事项',
    //       nodeType: 0,
    //       check: false,
    //       path: ['2']
    //     }
    //   ]
    //   this.flatData = this.flatTree()
    // }, 200)
  },
  methods: {
    /**
     * @description: 获取关联节点树
     * @param {void}
     * @return {void}
     */
    getTree() {
      this.loading = true
      this.checkedKeys = []
      const { projectId, inAndOutId, associatedNode } = this.data
      getKeyNode({
        projectId,
        inAndOutId
      })
        .then(({ code, data }) => {
          if (code === 200) {
            this.treeData = data.treeVO
            this.disableCheckList = data.disableCheckList
            setTimeout(() => {
              this.checkedKeys = [...new Set([...data.checkList, ...associatedNode])]
            }, 500)
            this.getExpand()
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 获取展开项
     * @param {void}
     * @return {void}
     */
    getExpand() {
      let list = []
      const loop = (tree) => {
        for (let i = 0; i < tree.length; i++) {
          if (tree[i].childTree && tree[i].childTree.length > 0) {
            list.push(tree[i].id)
            loop(tree[i].childTree)
          } else {
            list.push(tree[i].id)
          }
        }
      }
      loop(this.treeData)
      this.expand = list
    },
    /**
     * @description: 展开全部
     * @param {void}
     * @return {void}
     */
    expandedAll() {
      this.expandedKeys = this.expand
    },
    /**
     * @description: 收起全部
     * @param {void}
     * @return {void}
     */
    retractAll() {
      this.expandedKeys = []
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    /**
    //  * @description: 扁平化树
    //  * @param {void}
    //  * @return {Array} list 列表
    //  */
    // flatTree() {
    //   let list = []
    //   const loop = (tree) => {
    //     for (let i = 0; i < tree.length; i++) {
    //       if (tree[i].childTree && tree[i].childTree.length > 1) {
    //         loop(tree[i].childTree)
    //       } else {
    //         list.push(tree[i])
    //       }
    //     }
    //   }
    //   loop(this.tableData)
    //   return list
    // },
    /**
     * @description: 关闭模态框
     * @param {boolean} 是否需要刷新
     * @return {void}
     */
    handleModalCancel() {
      this.checkedKeys = []
      this.treeData = []
      this.$emit('update:visible', false)
    },
    /**
     * @description: 确定
     * @param {void}
     * @return {void}
     */
    handleConfirm() {
      const arr = this.checkedKeys.filter((el) => {
        if (!this.disableCheckList.includes(el)) {
          return el
        }
      })
      if (this.data.inAndOutId) {
        this.submiting = true
        relationNode({
          inAndOutId: this.data.inAndOutId,
          nodeIds: arr
        })
          .then(({ data: { code } }) => {
            if (code === 200) {
              this.$message.success('操作成功！')
              this.handleModalCancel()
            }
          })
          .finally(() => {
            this.submiting = false
          })
      } else {
        this.$emit('select', arr)
        this.handleModalCancel()
      }
    }
  }
}
</script>
<style  lang="less">
.select-associated-node {
  height: calc(var(--heightVh) - 24px);
  top: 24px;
  .ant-modal-content {
    height: 100%;
    .ant-modal-body {
      height: calc(100% - 108px);
      .ant-spin-nested-loading,
      .ant-spin-container {
        height: 100%;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@deep: ~'>>>';
.btn-wrapper {
  margin: 0 -5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  button {
    margin: 5px;
  }
}
.select-associated-node-checkbox {
  position: absolute;
  top: 0;
  left: -20px;
}
.select-associated-node-table {
  @{deep} .cell--tree-node {
    margin-left: 20px;
  }
  .select-associated-node-business-matters {
    padding-left: 20px;
    position: relative;
    .select-associated-node-checkbox {
      left: 0;
    }
  }
  @{deep} .el-table {
    td {
      padding: 2.5px 0;
    }
    th {
      padding: 8.5px 0;
    }
  }
}
.tree-wrapper {
  height: calc(100% - 52px);
  overflow-y: auto;
}
</style>
